<template>
  <div class="container">
    <div class="flex" style="background-color: #fff; padding-left: 20px; height: 48px">
      <img
        v-if="!isCollapse"
        src="@/assets/img/logo.png"
        style="width: 150px; height: 26px; margin-left: 4px"
      />
      <img v-else src="@/assets/img/icon_house.png" style="width: 24px; height: 28px" />
    </div>
    <el-scrollbar style="height: calc(100% - 48px)">
      <el-menu
        :default-active="default_active"
        @select="select_menu"
        unique-opened
        :collapse="isCollapse"
        class="el-menu-vertical-demo p_top15"
      >
        <el-sub-menu v-for="(item, index) in menu_list" :key="index" :index="item.name">
          <template #title>
            <svgBtn
              :icon="item.icon"
              class="cp"
              color="#fff"
              style="font-size: 18px; margin-right: 8px"
            ></svgBtn>
            <span>{{ item.name }}</span>
          </template>
          <div v-for="(item1, index1) in item.children" :key="index1 + ''">
            <el-sub-menu
              v-if="(item1.path == null || item1.path == '') && item1.parentId == item.id"
              :index="item1.id + ''"
            >
              <template #title>{{ item1.name }}</template>
              <div v-for="(item2, index2) in item1.children" :key="index2 + ''">
                <el-menu-item
                  v-if="item2.parentId == item1.id"
                  :index="item2.path"
                  style="padding-left: 30px"
                >
                  <span v-if="!isCollapse" class="menu_dian"></span>
                  {{ item2.name }}
                </el-menu-item>
              </div>
            </el-sub-menu>
            <el-menu-item
              v-if="item1.path != null && item1.path != '' && item1.parentId == item.id"
              :index="item1.path"
              style="padding-left: 20px"
            >
              <span v-if="!isCollapse" class="menu_dian"></span>
              {{ item1.name }}
            </el-menu-item>
          </div>
        </el-sub-menu>
      </el-menu>
    </el-scrollbar>
  </div>
</template>

<script lang="ts" setup>
import svgBtn from "@/components/svg_button.vue";
import { ref, onMounted, onUnmounted, computed, watch } from "vue";
import { useRouter, onBeforeRouteUpdate } from "vue-router";
import { useStore } from "vuex";
import EventBus from "@/utils/EventBus";
const isCollapse = computed(() => {
  return store.state.isCollapse;
});

const router = useRouter();
const store = useStore();
const menu_list = computed(() => {
  return store.state.role_list.filter((item) => {
    return item.name != "项目管理";
  });
});
console.log(menu_list.value);
const default_active = ref();
const tabs_list = ref(store.state.tabs_list);
onMounted(() => {
  EventBus.on("*", (type, num) => {
    if (type == "change_default_active") {
      console.log(num);
      default_active.value = num as any;
    }
  });
});
onUnmounted(() => {
  EventBus.all.clear();
});
onBeforeRouteUpdate((to) => {
  var list = to.matched[0].children;
  //   console.log(list)
  if (!has_tab(to.fullPath)) {
    for (let i in list) {
      if (to.fullPath == list[i].path) {
        var item = {
          name: list[i].name,
          path: list[i].path,
          label: (list[i] as any).label,
          is_active: true,
        };
        store.commit("add_tabs_list", item);
        break;
      }
    }
  }
});
const to_path = ref();
// 是否存在该tab
const has_tab = (path) => {
  var a = false;
  for (let i in tabs_list.value) {
    if (path == tabs_list.value[i].path) {
      store.commit("select_tabs_list", i);
      a = true;
    }
  }
  return a;
};

const select_menu = (index, indexPath) => {
  //   console.log(index, indexPath)
  to_path.value = index;
  if (has_tab(index)) {
    router.replace({
      name: to_path.value.substr(1, to_path.value.length - 1),
    });
  } else {
    router.push(to_path.value.substr(1, to_path.value.length - 1));
  }
  EventBus.emit("menu_value", { index: index });
};
</script>

<style lang="scss" scoped>
:deep(.el-scrollbar__bar) {
  display: none;
}
:deep(.is-light) {
  background: #3d4550 !important;
}
:deep(.el-sub-menu.is-active) {
  background-color: #3580eb;
}
.container {
  height: 100%;
  font-size: 16px;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
}
.el-scrollbar {
  background: #3d4550;
}
.el-menu-vertical-demo {
  height: 100%;
  background: #3d4550;
  color: #cfd4db;
}
.el-menu-item .menu_dian {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 8px;
}
.is-active > .menu_dian {
  background-color: #3580eb;
}
.el-sub-menu .el-menu-item {
  background-color: #2c3440 !important;
  &:hover {
    background-color: #444d59 !important;
  }
  color: #cfd4db;
  padding-right: 30px !important;
}
.el-sub-menu .el-menu-item.is-active {
  color: #3580eb;
}
</style>
